<template>
	<div class="college_lists table-theme">
		<head-title title="营销--商学院管理"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="classifyList"
						:value="class_id"
						placeholder="教学分类"
						type="class_id"
						label-name="class_name"
						value-name="class_id"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="orderbyList"
						:value="order_by"
						placeholder="选择排序"
						type="order_by"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="sortList"
						:value="ase"
						placeholder="选择排序"
						type="ase"
						@value="setSelectValue"
					>
					</select-view>
					<select-view
						:option-list="statusList"
						:value="status"
						placeholder="排序"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add">
						<el-button type="primary" @click="data(1)">添加教程</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总数据数：{{ total }}</p>
			<el-table :data="newsList">
				<el-table-column label="id" align="center" prop="college_id"></el-table-column>
				<el-table-column label="标题" align="center" prop="name"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="视频链接" align="center" width="280">
					<template slot-scope="scope">
						<p>{{scope.row.video}}</p>
					</template>
				</el-table-column>
				<el-table-column label="类型" align="center" prop="">
					<template slot-scope="scope">
						<p>{{classifyList[scope.row.class_id].class_name}}</p>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="sort" width="180"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.college_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="data(0, scope.row.college_id)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				status: 1,
				statusList: [{
						value: 1,
						label: '上架'
					},
					{
						value: 2,
						label: '下架'
					}
				],
				newsList: [],
				total: 0,
				ase: 2,
				class_id: 0,
				sortList: [{
						value: 1,
						label: '升序'
					},
					{
						value: 2,
						label: '降序'
					}
				],
				page: 0,
				classifyList: [{
						class_name: '所有分类',
						class_id: 0
					}, {
						class_name: '商城教程',
						class_id: 1
					},
					{
						class_name: '商家端教程',
						class_id: 2
					}
				],
				orderbyList: [{
					label: '时间排序',
					value: 'add_time'
				}, {
					label: '序号排序',
					value: 'sort'
				}],
				order_by: 'add_time'
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status,
					order_by: this.order_by,
					asc: this.ase,
					class_id: this.class_id == 0 ? '' : this.class_id,
				};
				this.newsList = []
				this.$http(this.$ApiList.CollegeLists, data).then(res => {
					this.newsList = res.datas
					this.total = res.counts;
				});
			},
			// 上下架
			upDown(e, college_id) {
				let data = {
					college_id: college_id,
					status: e
				}
				this.$http(this.$ApiList.CollegeOut, data).then(res => {
					this.$layer.msg('操作成功');
					this.init(this.page)
				});
			},
			// 添加或者修改
			data(isAdd, id) {
				if (isAdd == 1) {
					this.$router.push({
						path: '/college_data',
						query: {
							isAdd: isAdd
						}
					});
				} else {
					this.$router.push({
						path: '/college_data',
						query: {
							isAdd: isAdd,
							id: id
						}
					});
				}
			},
			refreshPage() {
				this.page = 1;
				this.ase = 2;
				this.class_id = 0;
				this.init()
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'class_id':
						this.class_id = value
						break;
					case 'order_by':
						this.order_by = value
						break;
					case 'ase':
						this.ase = value
						break;
					case 'status':
						this.status = value
						break;
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.college_lists {

	}
</style>
